<template>

    <div class="ctbsc-search">
        <van-sticky>
            <NavBar pathName="search" title="搜索资料"></NavBar>
            <van-search
                    v-model="postParams.title"
                    show-action
                    style="max-width: 750px;margin:0 auto;"
                    placeholder="支持多个关键词空格隔开搜索，如:领导 发言"
                    @search="search"
            >
                <template #action>
                    <div @click="search">搜索</div>
                </template>
            </van-search>
        </van-sticky>

        <div class="list-box" v-if="showStatus">

            <van-cell-group title="" class="van-hairline--surround" v-if="records.length>0">
                <template v-for="(item,index) in records">
                    <van-cell :to="'/detail/'+item.id">
                        <template #default>
                            <div class="item-box">
                                <div class="img">
                                    <img :src="$utils.getIconImg(item.type)" alt="">
<!--                                    <i :style="'color:'+$utils.getIconColor('docx')"-->
<!--                                                    :class="'far '+$utils.getIcon('docx')"></i>-->
                                </div>
                                <div class="item-con">
                                    <div class="item-title van-ellipsis">{{item.title}}</div>
                                    <div class="item-des van-ellipsis">{{item.title}}</div>
                                    <div class="item-nums">
                                        <span><van-icon name="underway-o"/>  {{item['human_time']}}</span>
                                        <span><van-icon name="eye-o"/> {{item['see_num']}}</span>
                                        <span><van-icon name="down"/> {{item['download_num']}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </van-cell>
                </template>
            </van-cell-group>

            <van-empty description="暂无记录" v-else/>
            <van-pagination v-if="total/pageParams.pageSize>1" force-ellipses @change="handleCurrentChange" v-model="pageParams.page" :total-items="total" :show-page-size="4">
                <template #prev-text>
                    <van-icon name="arrow-left" />
                </template>
                <template #next-text>
                    <van-icon name="arrow" />
                </template>
                <template #page="{ text }">{{ text }}</template>
            </van-pagination>
        </div>
        <van-loading color="#1AA97B" style="position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);" v-if="!loading"/>
    </div>
</template>

<script>
    import NavBar from "@/components/NavBar.vue";
    import wx from "weixin-js-sdk";
    export default {
        name: "SearchView",
        components: {
            NavBar
        },
        data() {
            return {
                records:[],
                loading:false,
                params:{
                    id:'',
                    sonid:'',
                    title:''
                },
                total:0,
                postParams:{
                    classifyId:'',
                    title:'',
                },
                pageParams:{
                    page:1,
                    pageSize:90
                },
                keyword:'',
                showStatus:false,
                watcher:null,
                from:'',
            };
        },
        created() {
            this.$utils.setPageTitle('搜索资料')
        },
        beforeRouteEnter(to, from, next) {
            next(vm => vm.from=from.name)
        },
        deactivated () {

        },
        activated(){
            if(this.from!='detail'){
                this.pageParams.page=1;
                this.params=this.$route.params
                if(this.params.keyword){
                    this.postParams.title=this.params.keyword;
                    this.$utils.setPageTitle(this.postParams.title)
                    this.wxShareInit();
                }
                this.getDataList()
            }
        },
        mounted:function(){
            this.$nextTick(()=>{
                window.scrollTo(0,0)
            });
        },
        methods:{
            search(){
                this.pageParams.page=1;
                // this.getDataList();
                let routeUrl=this.$router.resolve({ path: `/search/${this.postParams.title}` })
                window.open(routeUrl.href, "_blank");

            },

            handleSizeChange(val) {
                this.pageParams.pageSize=val;
                this.getDataList();

            },
            handleCurrentChange(val) {
                this.pageParams.page=val;
                this.getDataList();

            },

            getDataList(){
                //请求列表数据
                if(this.postParams.title){
                    this.$utils.setPageTitle(this.postParams.title)

                }
                let listParams={...this.postParams,...this.pageParams};
                this.loading=false;
                this.$apis.getDataList(listParams).then(lstres=>{
                    this.total=lstres.total;
                    this.records=lstres.records;
                    this.loading=true;
                    this.showStatus=true;
                    window.scrollTo(0,0)
                })
            },
            wxShareInit(){
                let title=document.title;
                if(!title){
                    title="池塘边素材网";
                }

                let params={
                    url:window.location.href
                }
                this.$apis.wxConfig(params).then(res => {
                    let wxConfig=JSON.parse(res.records.wxConfig);
                    let icon=this.$config.host+'/static/images/logo.jpg';
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
                        appId: wxConfig.appId, // 必填，公众号的唯一标识
                        timestamp:wxConfig.timestamp, // 必填，生成签名的时间戳
                        nonceStr: wxConfig.nonceStr, // 必填，生成签名的随机串
                        signature: wxConfig.signature,// 必填，签名
                        jsApiList:wxConfig.jsApiList // 必填，需要使用的 JS 接口列表
                    });

                    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                        wx.updateAppMessageShareData({
                            title:title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新", // 分享描述
                            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })
                        wx.updateTimelineShareData({
                            title:title, // 分享标题
                            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })

                        wx.onMenuShareWeibo({
                            title: title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新",
                            link: window.location.href, // 分享链接
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
                        wx.onMenuShareQQ({
                            title: title, // 分享标题
                            desc: "扣时事，跟热点，日更新",
                            //desc: info.title, // 分享描述
                            link: window.location.href, // 分享链接
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });

                    });
                })
            },
        }
    };
</script>
<style>
    .ctbsc-search{
        padding:0px 0px;
    }
</style>
